<template>
  <div>
    <div style="display:flex;flex-direction:row-reverse;margin-top:10px">
      <el-button :loading="saveLoading" size="mini" type="primary" @click="submitForm">保存</el-button>
    </div>
    <el-form
      ref="refForm"
      style="margin-top:20px"
      :rules="formRules"
      :model="formData"
      size="mini"
      label-width="150px"
    >
      <el-row>
        <el-col :span="8">
          <!--自动带出,可手工修改-->
          <el-form-item label="复尺人姓名:" prop="resurveyorCode">
            <input-with-dialog
              v-model="formData.resurveyorData"
              :props="{label:'userName',value:'account'}"
              :config="dialogConfig"
              @change="handleChangeName"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <!--自动带出，不可修改-->
          <el-form-item label="复尺人电话:" prop="resurveyorPhone">
            <el-input v-model="formData.resurveyorPhone" show-word-limit maxlength="11" placeholder="请输入电话号码" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="预计复尺时间:" prop="expectResurveyTime">
            <el-date-picker
              v-model="formData.expectResurveyTime"
              type="date"
              size="mini"
              :picker-options="pickerOptions"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="备注:" prop="resurveyorRemark">
            <el-input v-model="formData.resurveyorRemark" maxlength="1000" show-word-limit type="textarea" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="qup-title-box"><span class="border" /><span>测绘申请</span></div>
    <map-detail :detail-data="id" />
    <c-section title="测绘数据">
      <c-list :column="3">
        <c-list-item label="测量人类型" dict-type-code="SURVEYOR_TYPE" :value="detailData.surveyorType" />
        <c-list-item label="测量人姓名" :value="detailData.surveyorName" />
        <c-list-item label="测量人电话" :value="detailData.surveyorPhone" />
        <c-list-item label="预计测量时间" :value="detailData.expectSurveyTime" />
        <!-- <c-list-item label="工程监理" :value="detailData.constSupervision" /> -->
        <c-list-item label="是否完成测绘" dict-type-code="BOOLEANS" :value="detailData.isFinishMapping" />
      </c-list>
      <c-list :column="1">
        <c-list-item label="未测绘原因" :value="detailData.unsurveyReason" />
      </c-list>
      <c-list :column="3">
        <c-list-item label="测量卖场面积" :value="detailData.surveyShopArea" />
        <c-list-item label="测量门头面积" :value="detailData.surveyDheaderArea" />
        <c-list-item label="测量翻新面积" :value="detailData.surveyRefurbishArea" />
        <c-list-item label="测量扩建面积" :value="detailData.surveyExpansionArea" />
        <c-list-item label="是否需要复尺" dict-type-code="BOOLEANS" :value="detailData.isNeedResurvey" />
        <c-list-item label="预计复尺时间" :value="detailData.expectResurveyTime" />
      </c-list>
    </c-section>
    <c-section title="复尺数据">
      <c-list :column="1">
        <c-list-item label="复尺申请时间" :value="detailData.resurveyApplyTime" />
      </c-list>
      <c-list :column="1">
        <c-list-item label="复尺申请说明" :value="detailData.resurveyApplyDesc" />
      </c-list>
    </c-section>
    <div class="qup-title-box"><span class="border" /><span>附件管理</span></div>
    <file-detail :file-data="formData.shopAttachmentDTOList" />
  </div>
</template>
<script>
import mapDetail from './mapDetail.vue'
import fileDetail from './fileDetail.vue'
import BackPageMixin from '@/mixins/backPage'
import { getShopAttachment } from '@/api/common.js'
import { getDetailData, saveState } from '@/api/shopMap'
export default {
  name: 'ReMapArrange',
  components: { mapDetail, fileDetail },
  mixins: [BackPageMixin],
  props: {
  },

  data() {
    return {
      id: '',
      pickerOptions: {
        disabledDate(time) {
          var date = new Date()
          var y = date.getFullYear()
          var m = date.getMonth() + 1
          var d = date.getDate()
          var nowTime = new Date(`${y}-${m}-${d} 00:00:00`)
          return time.getTime() < nowTime.getTime()
        }
      },
      formRules: {
        resurveyorCode: [
          { required: true, message: '请选择复尺人', trigger: 'change' }
        ],
        resurveyorPhone: [
          { required: true, message: '请输入电话号码', trigger: 'change' },
          { pattern: /^[0-9]+$/, message: '只能输入数字' }
        ],
        expectResurveyTime: [
          { required: true, message: '请选择预计复尺时间', trigger: 'change' }
        ]
      },
      detailData: {}, // 测绘详情
      formData: {
        id: '',
        constCode: '',
        state: '',
        shopAttachmentDTOList: [],
        resurveyorCode: '', // 复尺人账号
        resurveyorName: '', // 复尺人姓名
        resurveyorPhone: '', // 复尺人电话
        expectResurveyTime: '', // 预计复尺时间
        resurveyorRemark: '', // 备注
        resurveyApplicantCode: '', // 复尺申请人编码
        resurveyApplicantName: '' // 复尺申请人名称

      },
      dialogConfig: {
        title: '复尺人',
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/user/domainUser/page`,
        setting: [{ prop: 'account', title: '账号' }, { prop: 'userName', title: '姓名' }, { prop: 'orgName', title: '组织' }, { prop: 'phone', title: '电话' }]
      },
      typeOptions: []
    }
  },
  async  created() {
    this.id = this.$route.query.id
    if (this.id) {
      this.getFiles()
      this.formData.id = this.id
      await getDetailData(this.id).then(res => {
        if (res.success === 1) {
          this.detailData = res.data
          this.formData.constCode = res.data.constCode
          this.formData.state = res.data.state
          this.formData.resurveyorRemark = res.data.resurveyorRemark || ''
        }
      })
    }
    const surveyor = [{ code: this.formData.resurveyorCode, name: this.formData.resurveyorName }]
    this.$set(this.formData, 'resurveyorData', surveyor)
  },
  methods: {
    // 获取附件
    getFiles() {
      getShopAttachment(this.id).then(res => {
        this.formData.shopAttachmentDTOList = res.data
      })
    },
    handleChangeName(data) {
      if (data.length !== 0) {
        this.formData.resurveyorCode = data[0].account// 复尺人账号
        this.formData.resurveyorName = data[0].userName// 名称
        this.formData.resurveyorPhone = data[0].phone// 电话
        this.$refs.refForm.validateField('resurveyorCode')
      } else {
        this.formData.resurveyorCode = ''// 复尺人账号
        this.formData.resurveyorName = ''// 名称
        this.formData.resurveyorPhone = ''// 电话
      }
    },
    submitForm() {
      this.$refs['refForm'].validate((valid) => {
        if (valid) {
          this.saveLoading = true
          this.formData.resurveyApplicantCode = this.$store.getters.user.data.account
          this.formData.resurveyApplicantName = this.$store.getters.user.data.userName
          delete this.formData.resurveyorData
          saveState(this.formData).then(res => {
            if (res.success === 1) {
              this.$message({
                message: '操作成功',
                type: 'success'
              })
              this.saveLoading = false
              this.$store.dispatch('views/goBack')// 返回列表页
            }
          }).catch(() => {
            this.saveLoading = false
          })
        }
      })
    }

  }
}
</script>
<style lang="scss" scoped>
/deep/ .el-breadcrumb__inner{
    color: $qup-color-primary;
  }
</style>
